<template>
  <div>
      <h2>房间号列表</h2>
      <div>
        房号：<input type="text" v-model="queryInfo.houseNo">
        创建时间：<input type="date" v-model="queryInfo.createTime">
        <input type="button" value="查询" @click="getList">
      </div>
      <table class="table table-bordered">
        <tr>
          <td>ID</td>
          <td>房间号</td>
          <td>房型</td>
          <td>状态</td>
          <td>图片</td>
          <td>创建时间</td>
          <td>操作</td>
        </tr>
        <tr v-for="item in list">
          <td>{{ item.hnId }}</td>
          <td>{{ item.hnName }}</td>
          <td>{{ item.hnState == 1?'启用':'停用' }}</td>
          <td>{{ item.hTypeName }}</td>
          <td><img :src="'https://localhost:7086'+item.hTypePhoto" width="60" height="60"/></td>
          <td>{{ item.hnCreateTime.substring(0,10) }}</td>
          <td>
            <input type="button" value="修改">
            <input type="button" value="下架">
          </td>
        </tr>
      </table>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, onMounted } from 'vue';
import axios from 'axios';
import { useRouter, useRoute } from 'vue-router';

const route = useRoute();
const router = useRouter();

let data :any= reactive({
  queryInfo:{
    houseNo:'',
    createTime:''
  },
  list:[]
})

let {queryInfo,list} = toRefs(data)


onMounted(()=>{
  getList()
})

const getList = ()=>{
  let obj = {
    houseNo:queryInfo.value.houseNo,
    createTime:queryInfo.value.createTime
  }

  console.log(obj);
  
  axios({
    url:'/api/Test/GetHouseNoList',
    method:'get',
    params:obj
  })
  .then(res=>{
    console.log(res);
    list.value = res.data.data
    
  })
  .catch(err=>{
    console.log(err);
    
  })
}
</script>

<style scoped>

</style>